<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册页面</title>
		<!-- 引入 element-ui 样式文件，需要网络，否则失效 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入 vue 文件，使用本地下载的-->
		<script type="text/javascript" src="js/vue.min.js"></script>
		<!-- 引入 axios 库文件，使用本地下载的-->
		<script type="text/javascript" src="js/axios.min.js"></script>
		<!-- 引入组件库文件，需要网络，否则失效 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			.input {
				width: 250px;
			}
			.one {
				border: 0px solid gray;
				text-align: center;
				border: 0px solid rebeccapurple;
			}
		</style>
	</head>
	<body>
		<div id="app" class="one">
			<h2>注册页面</h2>
			<!-- 使用了 Form 表单组件 -->
			<el-form label-width="60px">
				<el-form-item>
					姓名：<el-input v-model="user.uName" class="input" placeholder="请输入账号"></el-input>
				</el-form-item>
				<el-form-item>
					密码：<el-input v-model="user.uPassword" class="input" placeholder="请输入密码" type="password"></el-input>
				</el-form-item>
				<el-form-item>
					确认密码：<el-input v-model="user.uPassword2" class="input" placeholder="请输入密码" type="password">
					</el-input>
				</el-form-item>
				<el-form-item>
					用户名：<el-input v-model="user.uUsername" class="input" placeholder="请输入用户名">
					</el-input>
				</el-form-item>
				<el-form-item>
					邮箱：<el-input v-model="user.uEmail" class="input" placeholder="请输入邮箱"></el-input>
				</el-form-item>
				<el-button style="margin-left: 100px;" type="warning" @click="userExit">清空</el-button>
				<el-button type="primary" @click="userRegistration">立即注册</el-button>
			</el-form>
		</div>

		<!-- 引入外部 js 文件 -->
		<script src="js/common.js"></script>

		<script>
			let vue = new Vue({
				el: '#app',
				data: {
					user: {
						uName: '',
						uPassword: '',
						uPassword2: '',
						uUsername: '',
						uEmail: ''
					}
				},
				methods: {
					// 注册方法
					userRegistration() {
						// 判断值不能为空
						if (this.user.uName.length <= 0 || this.user.uPassword == 0 || this.user.uPassword2 == 0 ||
							this.user.uUsername <= 0 || this.user.uEmail <= 0) {
							return this.$message.error('输入的信息不能为空！')
						}
						// 多数据及文件需要使用 FormData() 表单提交
						const add = new FormData()
						add.append('uName', this.user.uName)
						add.append('uPassword', this.user.uPassword)
						add.append('uPassword2', this.user.uPassword2)
						add.append('uUsername', this.user.uUsername)
						add.append('uEmail', this.user.uEmail)
						// 开始发送请求
						axios({
							method: 'post',
							url: '/user/userRegistration',
							data: add
						}).then(r => {
							// this.$message.success('注册成功')
							alert('注册成功！即将跳转登录页面！！！')
							// 页面跳转
							window.location = 'userLogin.html';
						}).catch(err => {
							// 失败信息提示
							this.$message.error('注册失败' + err)
						})
					},
					// 清空按钮方法
					userExit() {
						// 取消信息提示
						this.$message.warning('已清空数据')
						// 清空集合数据
						this.user = {}
					}
				},
			})
		</script>
	</body>
</html>
